<template>
  <div>
    <!-- 页面头部信息 -->
    <van-nav-bar title="登录" fixed left-arrow @click-left="onClickLeft" @click-right="onClickRight">
      <template #right>
        <van-icon name="home-o" size="22" />
      </template>
    </van-nav-bar>
    <!-- 页面表单信息 -->
    <van-form @submit="onSubmit" class="myform">
      <van-field
        v-model="username"
        name="username"
        label="用户名"
        placeholder="用户名"
        :rules="[{ pattern: namevalid, message: '请填写用户名' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="password"
        label="密码"
        placeholder="密码"
        :rules="[{ pattern: pwdvalid, message: '请填写密码' }]"
      />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>
    <!-- 注册与忘记密码链接 -->
    <van-row style="font-size:15px;">
      <van-col span="6" @click="toRegister">前往注册</van-col>
      <van-col span="12"></van-col>
      <van-col span="6" @click="toFindPassword">忘记密码</van-col>
    </van-row>
    <!-- 分割符 -->
    <van-divider class="mydivider">使用其他账号登录</van-divider>
    <!-- 第三方账号 -->
    <van-row>
      <van-col span="6"></van-col>
      <van-col span="12">
        <van-row>
          <van-col span="8">
            <van-image round width="50px" height="50px" src="./static/icon/wx_icon.png" />
          </van-col>
          <van-col span="8">
            <van-image round width="50px" height="50px" src="./static/icon/qq_icon.png" />
          </van-col>
          <van-col span="8">
            <van-image
              round
              width="50px"
              height="50px"
              src="./static/icon/wb_icon.png"
              style="background-color:gray"
            />
          </van-col>
        </van-row>
      </van-col>
      <van-col span="6"></van-col>
    </van-row>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  name: 'login',
  // 数据绑定
  data() {
    return {
      username: '',
      password: '',
      namevalid: /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/,
      /**
       * 以字母开头，长度在6~18之间，只能包含字母、数字和下划线/^[a-zA-Z]\w{5,17}$/
       * 强密码(必须包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间)：^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$
       */
      pwdvalid: /^\w{5,17}$/
    }
  },
  // 引入组件
  components: {},
  methods: {
    onSubmit(values) {
      this.commen.login(values, res => {
        if (res.data.status === 200) {
          this.$dialog({ message: res.data.msg })
          setTimeout(() => {
            this.$router.push('/')
          }, 1000)
        } else {
          this.$dialog({ message: res.data.msg })
        }
      })
    },
    // 跳转注册页面
    toRegister() {
      this.$router.push('/register')
    },
    // 跳转找回密码页面
    toFindPassword() {
      this.$router.push('/findpassword')
    },
    // 头部左侧图标动作
    onClickLeft() {
      window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/')
    },
    // 头部右侧图标点击动作
    onClickRight() {
      this.$router.push('/home')
    }
  }
}
</script>

<style scoped>
.myform {
  padding-top: 20px;
  padding-bottom: 5px;
}
.mydivider {
  margin: 10px 0px;
}
</style>
